<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/10/5
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>小橘租车</title>
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

</head>
<style>
    .nav-wrap li {
        font-size: 14px;
    }
    .top-linkbox{
        line-height: 1.3;
    }
</style>
<body>
<%--${serverResponse}--%>
<body>
<jsp:include page="message.jsp"/>
<!--=======================================1. 标题================================================-->
<jsp:include page="util/top.jsp"/>
<!--======================================2. 内容=======================================-->

    <!-- 轮播图最大的盒子 -->
    <div class="carousel">
        <!-- 放置图片内容盒子 -->
        <div class="cal-list">
            <!-- ul整体 -->
            <ul class="viewpage">
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/120banner2560-550.jpg" alt=""></li>
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/third_roll.jpg" alt=""></li>
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/first_roll.jpg" alt=""></li>
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/120banner2560-550.jpg" alt=""></li>
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/third_roll.jpg" alt=""></li>
                <!--                     给ul添加最后子元素,这个子元素是第一个li-->
                <li><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/120banner2560-550.jpg" alt=""></li>
            </ul>
            <!-- 放置左右按钮 -->
            <div class="prev">&lt;</div>
            <div class="next">&gt;</div>
        </div>
        <!-- 小圆点 -->
        <div class="circle-list">
            <span class="circle active"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
        </div>
    </div>
<div style="position: relative; top: 18px;" class="w1180">
    <div class="hotcar-box">
        <div class="hotcar-intro clear_float">
            <div class="hotcar-left">
                <div style="font-size: 24px" class="hotcar-bt">热租车型</div>
                <a href="" target="_blank">
                    <div class="hotcar-banner">
                        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/hotcar_banner.png">
                    </div>
                </a>
            </div>
            <div class="hotcar-right">
             <%--   <a class="hotcar-liinfo" href="">
                    <span class="iconmore hoticon"></span>
                    <div class="hotcar-info">
                        <div class="hotcar-name">本田新飞度</div>
                        <div class="hotcar-type"><span>经济型 | 自动 | 5座</span></div>
                        <div class="hotcar-price"><span><em>￥</em>126</span>/天起</div>
                    </div>
                    <div class="hotcar-car" style="right: -20px;">
                        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/right-hot-car1.png" ></div>
                </a>--%>

            </div>
        </div>

    </div>
    <!--底部页面-->
    <div class="footer">
        <div class="footer-box clear_float">
            <div class="footer-left">
                <p>
                    <a href="" >关于小橘</a>
                    |
                    <a href="" >移动客户端</a>
                    |
                    <a href="" >帮助中心</a>
                    |
                    <a href="" >建议专区</a>
                    |
                    <a href="" >联系我们</a>
                    |
                    <a href="" >友情链接</a>
                    | &nbsp;投诉通道：400-821-1608 &nbsp;
                </p>
                <p>
                    Copyright © 2007 - 2021 上海小橘信息技术服务有限公司
                    <a href="" >ICP证：沪B2-20140130</a>
                </p>
            </div>
            <div class="footer-right">
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
                </a>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/index.js"></script>
<%--   =====轮播图=====--%>
<script>
    // 获取元素
    // ul元素
    var viewpage = document.getElementsByClassName('viewpage')[0];
    // 所有小圆点
    var circles = document.getElementsByClassName('circle');
    // 左右按钮
    var prev = document.getElementsByClassName('prev')[0];
    var next = document.getElementsByClassName('next')[0];
    // 放置图片和左右按钮的区域
    var calList = document.getElementsByClassName('cal-list')[0];
    // 排他函数
    function backcircle(ele) {
        for (var j = 0; j < ele.length; j++) {
            ele[j].className = "circle";
        };
    }

    // 1.鼠标放置到图片区域时,显示左右按钮,自动轮播停止
    // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
    // 3.给右边按钮绑定事件,ul移动,小圆点跟随图片变化
    // 4.给左边按钮绑定事件,ul移动,小圆点跟随图片变化
    // 5.自动轮播调用右边按钮事件就可以了
    // 6.焦点轮播

    // 1.鼠标放置到图片区域时,显示左右按钮,自动轮播停止
    calList.onmouseover = function() {
        prev.style.display = "block";
        next.style.display = "block";
        // 轮播停止
        clearInterval(viewpage.autoId);
    };
    // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
    calList.onmouseout = function() {
        prev.style.display = "none";
        next.style.display = "none";
        // 轮播开始
        autoplay();
    };
    // 3.给右边按钮绑定事件,ul移动,小圆点跟随图片变化
    // li的数量和小圆点的数量是不相同的,所以需要2个计数器,分别指代li和小圆点当前的状态

    // 设置小圆点的计数器
    var flag = 0;
    // li目标走的位置
    var count = 0;
    // 给右边按钮绑定事件
    next.onclick = function() {
        // 变成第二元素为当前的状态
        flag++;//1
        count++;//1
        // 判断flag的值
        // 回滚到flag初始0
        if (flag == circles.length) {
            flag = 0;
        };
        // 判断count的值回归
        if (count == viewpage.children.length) {
            // 拉回到left=0
            viewpage.style.left = 0;
            console.log('拉回');
            // 设置count为1,这样就可以看到第二张图片了
            count = 1;
        };

        // ①设置小圆点的样式
        // 先排他
        backcircle(circles);
        circles[flag].className = "circle active";
        // ②移动当前的ul使图片进行移动
        var target = count * (-1920);
        // 走动画
        moveAnimation2(viewpage, target);
    };
    // 4.给左边按钮绑定事件,ul移动,小圆点跟随图片变化
    prev.onclick = function() {
        // 是否是第一张图片
        if (count == 0) {
            count = viewpage.children.length - 1;//最后一个下标
            viewpage.style.left = count * (-1920) + 'px';
        };
        count--;
        flag--;
        if (flag < 0) {
            flag = circles.length - 1;
        };
        // ①设置小圆点的样式
        // 先排他
        backcircle(circles);
        circles[flag].className = "circle active";
        // ②移动当前的ul使图片进行移动
        var target = count * (-1920);
        // 走动画
        moveAnimation2(viewpage, target);
    };
    // 5. 自动轮播调用右边按钮事件就可以了
    function autoplay() {
        viewpage.autoId = setInterval(function() {
            // 调用右边按钮的点击事件
            // 变成第二元素为当前的状态
            flag++;//1
            count++;//1
            // 判断flag的值
            // 回滚到flag初始0
            if (flag == circles.length) {
                flag = 0;
            };
            // 判断count的值回归
            if (count == viewpage.children.length) {
                // 拉回到left=0
                viewpage.style.left = 0;
                console.log('拉回');
                // 设置count为1,这样就可以看到第二张图片了
                count = 1;
            };

            // ①设置小圆点的样式
            // 先排他
            backcircle(circles);
            circles[flag].className = "circle active";
            // ②移动当前的ul使图片进行移动
            var target = count * (-1920);
            // 走动画
            moveAnimation2(viewpage, target);
        }, 3000);
    };
    autoplay();
    // 6.焦点轮播
    // 循环给小圆点绑定事件
    for (var i = 0; i < circles.length; i++) {
        // 保存i值
        circles[i].index = i;
        // 绑定事件
        circles[i].onclick = function() {
            // 设置同步
            flag = this.index;
            count = this.index;
            console.log(flag);
            console.log(count);
            // 1.样式
            // 先排他
            backcircle(circles);
            this.className = "circle active";
            // 2.ul进行移动
            var target = this.index * (-1920);
            // 走动画
            moveAnimation2(viewpage, target);
        };
    };
</script>
<%--========数据渲染ajax============--%>
<script>

    getHotCar();

    function getHotCar(){
        var url = "${pageContext.request.contextPath}/index";
        $.get(url,null,
        function(result){
            console.log(JSON.stringify(result));
            var carArray = result.data;
            for(var i = 0;i<carArray.length; i++){
                var carType = carArray[i].carType;
                var carName = carArray[i].carName;
                var carId = carArray[i].carId;
                var carDailyPrice = carArray[i].carDailyPrice;
                var carShiftType = carArray[i].carShiftType;
                var carSeatNumber = carArray[i].carSeatNumber;
                var carImagePath = carArray[i].carImagePath;

            var aEle = '<a class="hotcar-liinfo" href="${pageContext.request.contextPath}/car/' + carId + '/store">\n' +
                '                    <span class="iconmore hoticon"></span>\n' +
                '                    <div class="hotcar-info">\n' +
                '                        <div class="hotcar-name">' + carName + '</div>\n' +
                '                        <div class="hotcar-type"><span>' + carType + ' | ' + carShiftType + ' | ' + carSeatNumber + '</span></div>\n' +
                '                        <div class="hotcar-price"><span><em>￥</em>' + carDailyPrice + '</span>/天起</div>\n' +
                '                    </div>\n' +
                '                    <div class="hotcar-car" style="right: 20px;">\n' +
                '                        <img src="' + carImagePath + '" ></div>\n' +
                '                </a>';
                $(".hotcar-right").append(aEle);
            }

        },"json");
    }

</script>
<%--==========消息推送--%>
<script>
    var custId = "${loginCustomer.custId}";
    if(custId != ""){
        var url = "${pageContext.request.contextPath}/pushMessage";
        $.get(url,{
            custId:custId
        }),function (result){
            console.log(result)
        }
        ,"json"
    }

</script>
</body>
</html>
